<template>
    <div class="header border-bottom">
		<div class="logo"><img src="@/assets/images/logo.png" alt=""></div>
		<div class="search_ico" @click="search_page"></div>
	</div>
</template>

<script>
export default {
    name: 'Header',
    methods:{
    	search_page(){
	  		this.$router.push('/search_page')
	  	}
    }
}

</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.header{width: 100%;height: 45px;line-height: 45px;background:$bgColor;display: flex;position: relative;z-index:2;}
.logo{width:100%;height:100%;overflow: hidden;}
.logo img{display: table;margin:0 auto;width:100px;margin-top:9px;}
.search_ico{position:absolute;right:0;top:0;width:45px;height: 45px;line-height: 45px;background:url("~@/assets/images/search_ico.png") no-repeat center center;z-index:2;background-size:40%;}

</style>